<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>图表分析</title>
<link rel="stylesheet" href="/css/style.css">
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/echarts.min.js"></script>
<style type="text/css">
	.tubiao{
		box-shadow: 0 0 30px rgba(0,0,0,0.14);
		margin: 50px auto;
		font-family: "黑体";
		padding:20px ;
	}
	.tubiaof{
		text-align: center;
		font-size: 30px;
		line-height: 50px;
		height: 50px;
		margin: 30px 0;
	}
</style>
</head>
<body style="background: #F2F2F2;">
	<div class="tubiaof">图表分析</div>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="tubiao" id="barchart" style="width: 1200px;height:400px;"></div>
    <div class="tubiao" id="mapchart" style="width: 1200px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('barchart'));
        var mapchart = echarts.init(document.getElementById('mapchart'));

        // 指定图表的配置项和数据
        var option = {
			title : {
		        text: '当月检查企业数量',
		        x:'center'
		    },
		    xAxis: {
		        type: 'category',
		        data: {{$monthArray}}
		    },
		    yAxis: {
		        type: 'value',
		        minInterval: 1
		    },
		    series: [{
		        data: {{$monthdata}},
		        type: 'bar'
		    }]
		};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        var option1 = {
		    title : {
		        text: '已检查企业类型占比',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: {!! $cate !!}
		    },
		    series : [
		        {
		            name: '已检查企业',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:{!! $catedata !!},
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
		mapchart.setOption(option1);
    </script>

</body>
</html>